<template>
  <div class="product-list">
    <template v-if="classId && data && status">
      <van-pull-refresh  v-pull-down-container-height="!isPullRefreshLoading" v-model="isPullRefreshLoading" @refresh="onRefresh">
        <div v-if="banner" class="banner">
          <img v-lazy="banner">
        </div>
        <ul v-if="data.length" class="list">
          <router-link tag="li" :to="{path:'/subClassproductlist',query:{id:item.classId}}" :key="item.classId" v-for="item in data">
            <div class="icon-wrap">
              <img v-lazy="item.logoUrl">
            </div>
            <p>{{item.className}}</p>
          </router-link>
        </ul>
        <p v-else class="none-data">呀，没有数据了...</p>
      </van-pull-refresh>
    </template>
    <tab-content-loading v-else/>
  </div>
</template>
<script>
  import TabContentLoading from "../../../components/Tab.Content.Loading";
  import {pullRefresh} from "../../../mixins/pull.refresh";

  export default {
    name: 'ClassSubProductList',
    mixins: [pullRefresh],
    components: {TabContentLoading},
    props: {
      classId: {
        type: [String, Number],
      },
      visible: {
        type: Boolean,
        default: false,
      },
      banner: {
        type: [String, Number],
      }
    },
    data() {
      return {
        data: null,
        status: ''
      }
    },
    watch: {
      visible: {
        handler: function (newVal) {
          if (newVal && this.visible && !this.status) {
            this.fetchPage();
          }
        },
        immediate: true
      }
    },
    methods: {
      setList(data = []) {
        this.status = 'success';
        this.data = data;
      },
      fetchPage() {
        this.status = 'wait';
        this.$ajax.getProductClassTwoList({classId: this.classId}).then(
          subProductRes => {
            this.setList(subProductRes.data.proClassTwoList);
            this.pullRefreshSuccess();
          },
          () => {
            this.status = '';
          }
        )
      },
    }
  }
</script>
